<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>条件脚本编辑</title>
    <#include "/pubHeadStyle.html">
</head>
<body>
<!-- 表单布局 -->
<form class="layui-fluid bpmAuthorizeAdd layui-form" lay-filter="formTest" style="height: 400px; overflow: auto;">
    <div class="layui-row" style="border-top: 1px solid #ccc;">
        <div class="layui-col-md2">
            <label class="layui-form-label" style="text-align: right;line-height: 38px;">脚本所在类的类名：</label>
        </div>
        <div class="layui-col-md10">
            <div class="layui-input-block">
                <select name="className" lay-filter="className">
                    <#list implClasses as list>
                        <option value="${list.name}" >${list.name}</option>
                    </#list>
                </select>
                <input type="hidden" name="id" value="${conditionScript.id}">
            </div>
        </div>
    </div>
    <div class="layui-row">
        <div class="layui-col-md2">
            <label class="layui-form-label" style="text-align: right;line-height: 38px;">类实例名：</label>
        </div>
        <div class="layui-col-md10">
            <div class="layui-input-block">
                <input type="text" name="classInsName" lay-filter="classInsName" placeholder="请输入" autocomplete="off" class="layui-input" disabled="">
            </div>
        </div>
    </div>
    <div class="layui-row">
        <div class="layui-col-md2">
            <div class="layui-form-label" style="text-align: right;line-height: 38px;">方法名：</div>
        </div>
        <div class="layui-col-md10">
            <div class="layui-input-block">
                <select name="methodName" lay-filter="methodName">
                    <option>请选择</option>
                </select>
            </div>
        </div>
    </div>
    <div class="layui-row">
        <div class="layui-col-md2">
            <div class="layui-form-label" style="text-align: right;line-height: 38px;">方法描述：</div>
        </div>
        <div class="layui-col-md10">
            <div class="layui-input-block">
                <input type="text" name="methodDesc" placeholder="请输入" autocomplete="off" class="layui-input">
            </div>
        </div>
    </div>
    <div class="layui-row">
        <div class="layui-col-md2">
            <div class="layui-form-label" style="text-align: right;line-height: 38px;">返回值类型：</div>
        </div>
        <div class="layui-col-md10">
            <div class="layui-input-block">
                <input type="text" name="returnType" placeholder="请输入" autocomplete="off" class="layui-input" disabled="">
            </div>
        </div>
    </div>
    <div class="layui-row">
        <div class="layui-col-md2">
            <div class="layui-form-label" style="text-align: right;line-height: 38px;">参数信息：</div>
        </div>
        <div class="layui-col-md10">
            <div class="layui-input-block">
                <table id="conditionScriptEditTable" lay-filter="conditionScriptEditTable"></table>
            </div>
        </div>
    </div>
    <div class="layui-row" style="border-top: 1px solid #ccc;">
        <div class="layui-col-md2">
            <label class="layui-form-label" style="text-align: right;line-height: 38px;">是否有效：</label>
        </div>
        <div class="layui-col-md10">
            <div class="layui-input-block">
                <select name="enable" lay-filter="enable">
                    <option value="0">是</option>
                    <option value="1">否</option>
                </select>
            </div>
        </div>
    </div>
</form>

<script type="text/html" id="bar">
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</script>
<script type="text/html" id="controlType">
    <select name="paraCt" lay-filter="paraCt">
        <option value="1">单行文本框</option>
        <option value="4">人员选择器(单选)</option>
        <option value="8">人员选择器(多选)</option>
        <option value="17">角色选择器(单选)</option>
        <option value="5">角色选择器(多选)</option>
        <option value="18">组织选择器(单选)</option>
        <option value="6">组织选择器(多选)</option>
        <option value="19">岗位选择器(单选)</option>
        <option value="7">岗位选择器(多选)</option>
        <option value="0">自定义对话框</option>
    </select>
    <span style="display: none;" id="settingSpan">
        <select id="dialog-type" name="dialog-type" onchange="dialogChange(this)" style="width:100px;">
            <option value="">请选择对话框……</option>
            <option value="ywsjmb" fields="">业务数据模板</option>
            <option value="zdydhklb" fields="">自定义对话框列表</option>
        </select>
        <select id="dialog-param" name="dialog-param" style="width:100px;">
            <option value="">请选择返回值……</option>
            <option value="ID">ID</option>
            <option value="NAME">NAME</option>
        </select>
    </span>
</script>
<script>
    layui.config({
        base: serverPath.systemPath + staticPath.systemPath //静态资源所在路径
    }).extend({
        index: 'index' //主入口模块
    }).use(['index','jquery','form','table','setter'],function(){
        var $ = layui.jquery;
        var form = layui.form;
        var table = layui.table;
        var setter = layui.setter;
        var id = "${conditionScript.id}";
        var dataTables = '${conditionScript.argument}';
        var isFirst = true;
        //渲染脚本所在类的类名——初始化
        var className = $("select[name=className]").val();
        if(!className)return;
        var match = /^.*\.(\w*)$/.exec(className),
            name = '';
        if(match!=null){
            name = match[1];
        }
        if(!name)return;
        name = name.toLowerCase().split("",1) + name.slice(1);

        $('head').append('<link href="/css/workflow.css" rel="stylesheet" type="text/css" />');
        // 滚动条显示
        $('.layui-layout-body').css('overflow','auto');

        $("input[name='classInsName']").val(name);
        if(id&&isFirst){
            methodNameAdd("${conditionScript.className}");
        }else {
            methodNameAdd(className);
        }
        //方法名联动
        form.on('select(className)', function(data){
            var className = data.value;
            if(!className)return;

            var match = /^.*\.(\w*)$/.exec(className),
                name = '';
            if(match!=null){
                name = match[1];
            }
            if(!name)return;
            name = name.toLowerCase().split("",1) + name.slice(1);
            $("input[name='classInsName']").val(name);
            methodNameAdd(data.value);
        });
        //加载所属方法名
        function methodNameAdd(methodNameData) {
            var getMethodsByNameData;
            $.ajax({
                type: 'POST',
                url: serverPath.workflowPath + setter.workflowLinkPath + 'conditionScript/getMethodsByName',
                data: {name:methodNameData},
                dataType:'json',
                success: function(data){
                    getMethodsByNameData = data;
                    $("select[name=methodName]").html("");
                    if (data.code==0) {
                        if (data.data.length>0){
                            $.each(data.data, function(key, val) {
                                var option2 = $("<option>").val(val.methodName).text(val.methodName);
                                $("select[name=methodName]").append(option2);
                            });
                            $("input[name=returnType]").val(data.data[0].returnType);
                            //第一个表格实例
                            conditionScriptEditTable(data.data[0].para);
                        }else {
                            $("select[name=methodName]").html("");
                            var data = [];
                            conditionScriptEditTable(data);
                            $("input[name=returnType]").val('');
                        }
                    }
                    form.render('select');
                }
            });
            //参数信息联动
            form.on('select(methodName)', function(choiceData){
                $.each(getMethodsByNameData.data, function(key, val) {
                    if (choiceData.value==val.methodName){
                        conditionScriptEditTable(val.para);
                    }
                });
            });
        };
        //表格实例
        function conditionScriptEditTable(data) {
            table.render({
                elem: '#conditionScriptEditTable'
                ,page: false //开启分页
                ,data:data
                ,cols: [[ //表头
                    {field: 'paraName', title: '参数信息'}
                    ,{field: 'paraType', title: '参数类型', sort: true}
                    ,{
                        field: 'paraDesc',
                        title: '参数说明',
                        templet: function(d){
                            return '<input type="text" name="paraDesc" value="'+d.paraDesc+'" lay-filter="paraDesc" placeholder="请输入" autocomplete="off" class="layui-input">'
                        }
                    }
                    ,{field: 'paraCt', title: '控件类型', templet:'#controlType'}
                ]]
                ,done: function(res, curr, count){
                    //数据渲染完的回调。
                    //由于layui 设置了超出隐藏，所以这里改变下，以兼容操作按钮的下拉菜单
                    $(".layui-table-body, .layui-table-box, .layui-table-cell").css('overflow', 'visible');
                    form.on('select(paraCt)', function(choiceData){
                        if (choiceData.value==0){
                            $(choiceData.othis).eq(0).siblings('span').show();
                        }else {
                            $(choiceData.othis).eq(0).siblings('span').hide();
                        }
                    });
                }
            });
            // 如果是修改，数据回显
            if(id&&isFirst){
                var dataTable = $.parseJSON(dataTables);
                if (dataTable.length>0){
                    table.render({
                        elem: '#conditionScriptEditTable'
                        // ,height: 312
                        ,page: false //开启分页
                        ,data:dataTable
                        ,cols: [[ //表头
                            {field: 'paraName', title: '参数信息'}
                            ,{field: 'paraType', title: '参数类型', sort: true}
                            ,{
                                field: 'paraDesc',
                                title: '参数说明',
                                templet: function(d){
                                    return '<input type="text" name="paraDesc" value="'+d.paraDesc+'" lay-filter="paraDesc" placeholder="请输入" autocomplete="off" class="layui-input">'
                                }
                            }
                            ,{field: 'paraCt', title: '控件类型', templet:'#controlType'}
                        ]]
                        ,done: function(res, curr, count){
                            //数据渲染完的回调。
                            $.each(dataTable,function (index,value) {
                                $("select[name=paraCt]").eq(index).val(value.paraCt);
                                if (value.target||value.dialog) {
                                    $("select[name=paraCt]").eq(index).siblings("#settingSpan").show();
                                    $("select[name=paraCt]").eq(index).siblings("#settingSpan").find("select[name=dialog-type]").val(value.dialog);
                                    $("select[name=paraCt]").eq(index).siblings("#settingSpan").find("select[name=dialog-param]").val(value.target);
                                }
                            })
                            //由于layui 设置了超出隐藏，所以这里改变下，以兼容操作按钮的下拉菜单
                            $(".layui-table-body, .layui-table-box, .layui-table-cell").css('overflow', 'visible');
                            form.on('select(paraCt)', function(choiceData){
                                if (choiceData.value==0){
                                    $(choiceData.othis).eq(0).siblings('span').show();
                                }else {
                                    $(choiceData.othis).eq(0).siblings('span').hide();
                                }
                            });
                        }
                    });
                    form.val("formTest", {
                        "className": "${conditionScript.className}", // "name": "value"
                        "classInsName": "${conditionScript.classInsName}", // "name": "value"
                        "methodName": "${conditionScript.methodName}", // "name": "value"
                        "methodDesc": "${conditionScript.methodDesc}", // "name": "value"
                        "returnType": "${conditionScript.returnType}", // "name": "value"
                        "enable": "${conditionScript.enable}", // "name": "value"
                    })
                }
                isFirst=false;
            }
        };
    });
</script>
</body>
</html>